import React from 'react'
import {Layout} from 'antd'
import SiderNav from '../../components/SiderNav'
import ContentMain from '../../components/ContentMain'
import HeaderBar from '../../components/HeaderBar'
import API from '../../axios/api'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";

const {Sider, Header, Content, Footer} = Layout

@withRouter @inject('appStore') @observer
class Index extends React.Component{
  state = {
    collapsed: false,
      menus: []
  }

  //render 文档加载前执行
  componentWillMount(){
    this.initRudder()
    this.getRolePermissionByUserId()
  }

  toggle = () => {
    // console.log(this)  状态提升后，到底是谁调用的它
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  initRudder = () =>{
        let params = {
            ...API.config,
        }
        API.fetchRudderPages(params).then(res => {
            let initRudderList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => initRudderList.push({value: item.Id, mean: item.RudderName}))
                this.props.appStore.initRudder(initRudderList)
            }
        })
    }

    getRolePermissionByUserId =  () => {
        const parms = {
            permissionType: 1
        }
        API.getRolePermissionByUserId(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    menus: res.Data
                });
            }
        })
    }

  render() {
    return (
      <div id='page'>
        <Layout>
          <Sider className="siderpage" collapsible
                 trigger={null}
                 collapsed={this.state.collapsed}
                 >
            <SiderNav menus={this.state.menus}/>
          </Sider>
          <Layout>
            <Header style={{background: '#fff', padding: '0 16px'}}>
              <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
            </Header>
            <Content>
              <ContentMain/>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
export default Index
